<template>
  <div class="container container--zone">
    <div class="region region--full">
      <section class="component component--module video-player-safe">
        <div class="column column--full j-videoCenterPlayerContainer">
          <div class="video-inner">
            <div id="video-title-video-player_0" class="styles__videoTitleContainer_MVI4TH1CpYWF7DvSQaYA video-fade-in">
              <div class="styles__videoTitle_MU8JRVssXCHNkhbVAaNH">
                Clashes Outside Georgian Parliament as ‘Foreign Agents’ Bill
                Approved
              </div>
            </div>
            <video v-if="isvideo" class="video" ref="videoElement" :src="imgPath + videodetailData.url"
              controls></video>
            <!-- <track
                kind="subtitles"
                label="English"
                srclang="en"
                id=""
                src=""
              /> -->
          </div>
        </div>
      </section>
    </div>
  </div>
  <div class="container container--zone" role="region">
    <div class="region region--primary">
      <section class="component component--module video-player-safe">
        <div class="column column--full j-videoCenterPlayerContainer">
          <div class="element element--article video">
            <!-- 飞书... icon -->
            <div class="article__content over-video">
              <h3 class="article__headline j-videoCenterHeadline">
                Clashes Outside Georgian Parliament as ‘Foreign Agents’ Bill
                Approved
              </h3>

              <div class="social__share">
                <ul class="social__list js-social-share">
                  <li class="icon email mobile-scrim js-email">
                    <span class="screen-reader-text">Email icon</span>
                  </li>

                  <li class="icon facebook">
                    <span class="screen-reader-text">Facebook icon</span>
                  </li>

                  <li class="icon twitter">
                    <span class="screen-reader-text">Twitter icon</span>
                  </li>

                  <li class="icon linkedin">
                    <span class="screen-reader-text">Linkedin icon</span>
                  </li>

                  <li class="icon flipboard js-flipboard">
                    <span class="screen-reader-text">Flipboard icon</span>
                  </li>
                </ul>
              </div>
              <p class="article__timestamp" data-est="2024-05-15T00:55:00">
                May. 15, 2024 at 12:55 a.m. ET
              </p>
              <div class="article__description j-videoCenterDescription">
                <p class="paragraph">
                  Thousands of people rallied to protest the approval of the
                  bill, which is seen as a Russian ploy to weaken growing ties
                  between the former Soviet state and Europe. Photo: David
                  Mdzinarishvili/Shutterstock
                </p>
                <div class="footnote">
                  <a class="link" href="">This video originally appeared on WSJ Video</a>.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 未封装 -->
      <section class="component component--module video-next-up" v-if="isvideoText">
        <div class="column column--full">
          <div class="next__up j-nextUp">
            <h2 class="title">Next Up</h2>
            <div class="next__scroll">
              <div class="list list--video j-nextUpPlaylist">
                <div class="element element--article video WSJVideo" v-for="(item, index) in nextupdata" :key="index">
                  <figure class="article__figure">
                    <!-- 时间 -->
                    <!-- <span class="article__length">{{ item.content }}</span> -->
                    <a class="figure__image video disableShadowBox">
                      <router-link class="link" :to="{ path: '/videoDetail', query: { id: item.id } }">
                        <img class="lazyautosizes lazyloaded" :src="imgPath + item.cover" />
                        <i class="icon icon--play"></i>
                      </router-link>
                    </a>
                  </figure>
                  <div class="article__content over-video">
                    <h3 class="article__headline">
                      <a class="link">
                        {{ item.title }}
                      </a>
                    </h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Latest Videos -->
      <section class="component component--module latest-video">
        <header class="header header--primary">
          <h2 class="title">
            <span class="label">Latest Videos</span>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter v-if="isvideoText" :latestData="latestData"></videoCenter>
        </div>
      </section>
      <!-- Most Popular -->
      <section class="component component--module video-most-popular">
        <header class="header header--secondary link-to no-link">
          <h2 class="title">
            <span class="label">Most Popular</span>
          </h2>
        </header>
        <div class="column column--primary">
          <videoCenter v-if="isvideoText" :latestData="latestData1"></videoCenter>
        </div>
      </section>
      <!-- MarketBrief -->
      <section class="component component--module video-series">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link" href="">MarketBrief</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter v-if="isvideoText" :latestData="secrorData"></videoCenter>
        </div>
      </section>
      <!-- Explainomics -->
      <section class="component component--module video-series">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link" href="">Explainomics</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter v-if="isvideoText" :latestData="moneyData"></videoCenter>
        </div>
      </section>

      <!-- Office Hours -->
      <section class="component component--module video-series">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link" href="">Office Hours</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter v-if="isvideoText" :latestData="latestData"></videoCenter>
        </div>
      </section>

      <!-- Mastering Your Money -->
      <section class="component component--module video-series">
        <header class="header header--secondary link-to">
          <h2 class="title">
            <a class="link" href="">Mastering Your Money</a>
          </h2>
        </header>
        <div class="column column-full">
          <videoCenter v-if="isvideoText" :latestData="latestData1"></videoCenter>
        </div>
      </section>

      <section class="component component--module section-grid">
        <!-- SectorWatch -->
        <columnHas :linkData="hasData" v-if="isvideoText"></columnHas>
        <!-- How Bad Is It -->
        <columnGrid :gridmoduleData="gridData" v-if="isvideoText"></columnGrid>
        <!-- Fire Starters -->
        <columnGrid :gridmoduleData="gridData1" v-if="isvideoText"></columnGrid>

        <!-- The Cost of Things -->
        <columnHas :linkData="hasData1" v-if="isvideoText"></columnHas>
        <!-- The Moneyist -->
        <columnHas :linkData="hasData2" v-if="isvideoText"></columnHas>
        <!-- Getting to Work With -->
        <columnHas :linkData="hasData1" v-if="isvideoText"></columnHas>
      </section>
    </div>
  </div>
  <adverTisement></adverTisement>
</template>
<script setup>
import "../../video/video.css";
import { userRetireArrays } from "@/api/videodetail.js";
// 引入videoCenter.vue
import videoCenter from "@/views/video/videoCenter";
// 引入columnHas.vue
import columnHas from "@/views/video/videoDetails/column/columnHas";
// 引入columnHas.vue
import columnGrid from "@/views/video/videoDetails/column/columnGrid";
// 直接使用 未传参
import adverTisement from "@/views/home/adverTisement/adverTiseMent";

// 声明一个响应式引用
const videoElement = ref(null);
let isvideo = ref(false);
let isvideoText = ref(false);
let videodetailData = ref();
let imgPath = ref();
import { useRoute } from "vue-router";
const route = useRoute();
import homeRequest from "@/api/home.js";
import getConfig from "@/api/login.js";
const uuid = ref("");
// 详情页视频
const getvideoDetail = () => {
  let data = {
    id: uuid.value,
  };
  homeRequest
    .videoDetail(data)
    .then((res) => {
      console.log(res);
      if (res.code == "0") {
        videodetailData.value = res.data;
        console.log(videodetailData.value);
        isvideo.value = true;
      }
    })
    .catch((e) => {
      console.log(e);
    });
};
// url路径
const changeVideo = () => {
  getConfig
    .getSystem()
    .then((res) => {
      if (res.code == "0") {
        imgPath.value = res.data.awsPrefix;
      }
    })
    .catch((e) => { });
};
const videoData = ref([]);
const latestData = ref([]);
const latestData1 = ref([]);
const secrorData = ref([]);
const moneyData = ref([]);
const nextupdata = ref([]);

const gridData = ref([]);
const gridData1 = ref([]);
const hasData = ref([]);
const hasData1 = ref([]);
const hasData2 = ref([]);
// 视频列表
const getNewList = () => {
  homeRequest
    .videoList()
    .then((res) => {
      if (res.code == "0") {
        console.log(res);
        videoData.value = res.data.records;
        if (videoData.value.length >= 2) {
          console.log(videoData.value);
          latestData.value = videoData.value.slice(0, 2);
        }
        if (videoData.value.length >= 4) {
          console.log(videoData.value);
          latestData1.value = videoData.value.slice(2, 4);
          gridData.value = videoData.value.slice(0, 3);
          hasData.value = videoData.value.slice(0, 3);
        }
        if (videoData.value.length >= 7) {
          console.log(videoData.value);
          nextupdata.value = videoData.value.slice(0, 5);
          secrorData.value = videoData.value.slice(4, 7);
          gridData1.value = videoData.value.slice(3, 6);
          hasData1.value = videoData.value.slice(3, 6);
        }
        if (videoData.value.length >= 10) {
          console.log(videoData.value);
          moneyData.value = videoData.value.slice(7, 10);
          hasData2.value = videoData.value.slice(6, 9);
        }
        isvideoText.value = true;
      }
    })
    .catch((e) => { });
};
// 在组件挂载后播放视频
onMounted(async () => {
  uuid.value = route.query.id;
  console.log(uuid.value);
  getvideoDetail();
  changeVideo();
  getNewList();
  if (videoElement.value) {
    setTimeout(() => {
      // console.log(videoElement.value,'222')
      videoElement.value.play();
    }, 10000);
  }
});
const {
  explainoData,
  aiData,
  fireData,
  marketData,
  howData,
  marketBrief,
  bestData,
  officeData,
  mastering,
  headerData,
  linkData,
  moduleData,
  headerData1,
  linkData1,
  moduleData1,
  headerData2,
  linkData2,
  moduleData2,
  headerData3,
  linkData3,
  moduleData3,
  gridheaderData,
  gridmoduleData,
  gridheaderData1,
  gridmoduleData1,
} = userRetireArrays();
</script>
<style lang="scss" scoped>
.video-inner {
  width: 100%;
  height: 100%;

  .video-fade-in {
    color: #262626;
    cursor: pointer;
    box-sizing: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    position: absolute;
    width: 940px;
    height: 30%;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.34) 39%,
        rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;

    .styles__videoTitle_MU8JRVssXCHNkhbVAaNH {
      cursor: pointer;
      pointer-events: none;
      box-sizing: inherit;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      padding: 0;
      border: 0;
      font: inherit;
      vertical-align: baseline;
      position: relative;
      margin: 20px;
      font-weight: bold;
      letter-spacing: 0px;
      line-height: 40px;
      color: rgb(255, 255, 255);
      font-family: "Escrow Condensed", Georgia, serif;
      opacity: 1;
      transition: opacity 0.2s ease-in-out;
      font-size: 40px;
    }
  }

  .video {
    color: #262626;
    cursor: pointer;
    box-sizing: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    // vertical-align: baseline;
    width: 940px;
    height: 529px;
    // position: absolute;
    display: block;
  }
}
</style>
